<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="RevampModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl map-ctrl">

        <div class="modal-title">
          <p>{{ isDetailsModal ? "查询WIFI信息" : "修改WIFI信息" }}</p>
        </div>

        <div class="modal-ctrl-content clear-false">
          <div class="map-body f-l">
            <pointMap
              v-if="RevampModalObj.isShow"
              ref="pointMapRef"
              :point="point"
              :actionType="actionType"
              :isPolygonButton="isPolygonButton"
              @pointCoordinate="pointCoordinate"
            ></pointMap>
          </div>

          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">
            <div class="even-row">

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  地址：
                </div>
                <input type="text" maxlength="64" placeholder="最长64个字符" :readonly="isDetailsModal" v-model="ModalData.address" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  安装时间：
                </div>
                <div class="input-group date" id="wifiRevampData">
                  <span class="input-group-addon glyphicon glyphicon-list"><i class="fa fa-calendar"></i></span>
                  <input type="hidden" ref="installTime" >
                  <input type="text" :disabled="isDetailsModal" ref="DinstallTime"  readonly="readonly" class="form-control" required="required" data-date-format="dd-mm-yyyy">
                </div>
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  IP地址：
                </div>
                <input type="text" :readonly="isDetailsModal" v-model="ModalData.ipAddress" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  名称：
                </div>
                <input type="text" maxlength="16" placeholder="最长16个字符" :readonly="isDetailsModal" v-model="ModalData.name" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  设备号：
                </div>
                <input type="text" maxlength="16" placeholder="最长16个字符" :readonly="isDetailsModal" v-model="ModalData.num" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  所属单位：
                </div>
                <input type="text" :readonly="isDetailsModal" v-model="stationName" @click="getStationTree" readonly="readonly" class="modal-text f-l" >
                <input type="hidden" :readonly="isDetailsModal" v-model="ModalData.stationid">
                <div class="sectionTree" v-show="sectionTreeIShow">
                  <div id="upDatasectionTree" class="ztree sectionTree-box"></div>
                </div>
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  点位名称：
                </div>
                <input type="text" maxlength="16" placeholder="最长16个字符" :readonly="isDetailsModal" v-model="ModalData.pointName" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  扩展属性表：
                </div>
                <input type="text" :readonly="isDetailsModal" readonly="readonly" v-model="ModalData.owner" class="modal-text f-l">
              </div>

             <!-- <div class="modal-row" >
                <div class="modal-form-key f-l ">
                  大图：
                </div>
                <input type="text" :readonly="isDetailsModal" v-model="ModalData.bimage" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  小图：
                </div>
                <input type="text" :readonly="isDetailsModal" v-model="ModalData.simage" class="modal-text f-l">
              </div>-->

              <div class="modal-row">
                <div class="modal-form-key f-l ">
                  经度：
                </div>
                <input type="text" :readonly="isDetailsModal" maxlength="12" v-model="ModalData.longitude" class="modal-text f-l">
              </div>

              <div class="modal-row">
                <div class="modal-form-key f-l ">
                  纬度：
                </div>
                <input type="text" :readonly="isDetailsModal" maxlength="11" v-model="ModalData.latitude" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l ">
                  维护单位：
                </div>
                <input type="text" maxlength="32" placeholder="最长32个字符" :readonly="isDetailsModal" v-model="ModalData.maintenanceUnit" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  维护单位电话：
                </div>
                <input type="text" :readonly="isDetailsModal" v-model="ModalData.maintenanceUnitTel" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  备注：
                </div>
                <input type="text" maxlength="100" placeholder="最长100个字符" :readonly="isDetailsModal" v-model="ModalData.remark" class="modal-text f-l">
              </div>

              <div class="modal-row">
                <div class="modal-form-key f-l">
                  WIFI类型：
                </div>
                <select :disabled="isDetailsModal" :value="ModalData.resourceTypeCode">
                  <option value="WIFI探针">WIFI探针</option>
                </select>
              </div>

            </div>
          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default"  @click="close">取消</button>
          <button type="button" class="btn btn-info" v-show="!isDetailsModal" @click="subBtn">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
  import pointMap from "../../map/pointMap/pointMap"

  export default {
        name: "RevampWifiModal",
        props:["RevampModalObj","selectRow","isDetailsModal"],
        data(){
          return{
            ModalData:{
              address:'', //账号
              bimage:'', //大图
              ipAddress:'',//IP地址
              latitude:'',//经度
              longitude:'',//纬度
              maintenanceUnit:'',//维护单位
              maintenanceUnitTel:'',//维护单位
              name:'',//名称
              num:'',//设备号
              stationid:'',//所属单位
              pointName:'',//点位名称
              remark:'',//备注
              simage:'',//小图
              resourceTypeCode:'WIFI探针',//WIFI类型
              owner:'T_RES_WIFI',//扩展属性表
              installTime:'',//安装时间
            },
            carTypeList:[],
            stationName:'',
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            sectionTreeIShow:false,
            selectId:"",
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            isPolygonButton: false, // 不现实画面按钮
            openMapDataContentIsShow: true
          }
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                this.selectId = this.selectRow;
                //console.log(this.selectId);
                this.getWifiData();
              }
            },
            deep:true
          }
        },
    components:{
      pointMap,
    },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.ModalData.stationid = treeNode.id;
              _this.stationName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          };
        },
        methods:{
          //获取wifi数据信息
          getWifiData(){
            this.$axios.get(this.DotCtrl+"/resource/wifi/id/"+this.selectId)
              .then((data)=>{
                let successData = data.data;
                //console.log(successData);
                //console.log(this.ModalData);
                for( let modalKey in this.ModalData ){
                  for( let successKey in successData ){
                    if( modalKey === successKey ){
                      this.ModalData[modalKey] = successData[successKey]
                    }
                  }
                }
                this.stationName = successData.stationName;
                let installTime = successData.installTime ?  (successData.installTime.split("T"))[0] : "";
                this.$refs.installTime.value = installTime;
                this.$refs.DinstallTime.value = installTime;
                if( this.ModalData.longitude && this.ModalData.latitude ){
                  this.point = [this.ModalData.longitude, this.ModalData.latitude];
                  this.actionType = 'edit';
                }
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            //console.log(this.$refs.installTime);
            //console.log(this.$refs.installTime.value);
            this.ModalData.installTime = this.$refs.installTime.value;
            this.ModalData.installTime ?  this.ModalData.installTime = this.ModalData.installTime+"T02:09:17.245+05:30":this.ModalData.installTime = "";
            //console.log(this.ModalData);
            //return false;
            if( this.verifyForm.isNull(this.ModalData.address) ){
              this.s_alert("地址不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.password) ){
              this.s_alert("密码不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.installTime) ){
              this.s_alert("安装时间不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.ipAddress) || this.verifyForm.isIP(this.ModalData.ipAddress) ){
              this.s_alert("IP地址为空或格式不正确！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.name) ){
              this.s_alert("名称不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.num) ){
              this.s_alert("设备号不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.stationid) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }
            else if( this.verifyForm.isNull(this.ModalData.pointName) ){
              this.s_alert("点位名称不能为空！");
              return false;
            }
            else if( this.verifyForm.isIphoneOrTell(this.ModalData.maintenanceUnitTel) ){
              this.s_alert("维护单位电话格式不正确！");
              return false;
            }
            else if( this.verifyForm.ifLongitude(this.ModalData.longitude) ){
              this.s_alert("经度格式或区间不正确！正负180以内！");
              return false;
            }
            else if( this.verifyForm.ifLatitude(this.ModalData.latitude) ){
              this.s_alert("纬度格式不正确！正负90以内！");
              return false;
            }
            //PUT /resource/wifiCRUD/updateWifi/{id}
            this.$axios.put(this.DotCtrl+"/resource/wifiCRUD/updateWifi/"+ this.selectId,this.ModalData)
              .then((data)=>{
                //console.log(data);
                this.s_alert("修改成功！");
                this.s_logwrite("资源信息管理-WIFI管理","修改WIFI");
                this.close();
              })
              .catch((err)=>{
                this.s_alert("修改失败！");
                //console.log(err);
              })
          },
          //是否在线
          selectIsOnline(ele){
            ////console.log(ele.target.value);
            this.ModalData.isonline = ele.target.value;
          },
          selectCameraType(ele){
            ////console.log(ele.target.value);
            this.ModalData.category = ele.target.value;
          },
          attrTable(ele){
            ////console.log(ele.target.value);
            this.ModalData.code = ele.target.value
          },
          //展开部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
              this.getStationTreeAjax()
            }
          },
          //加载部门树
          getStationTreeAjax(){
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                $.fn.zTree.init($("#upDatasectionTree"), this.setting, data.data.data);
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //关闭弹窗
          close(){
            this.$emit("RevampModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.ModalData={
              address:'', //账号
              bimage:'', //大图
              installTime:'',//安装时间
              ipAddress:'',//IP地址
              latitude:'',//经度
              longitude:'',//纬度
              maintenanceUnit:'',//维护单位
              maintenanceUnitTel:'',//维护单位
              name:'',//名称
              num:'',//设备号
              stationid:'',//所属单位
              pointName:'',//点位名称
              remark:'',//备注
              simage:'',//小图
              resourceTypeCode:'WIFI探针',//WIFI类型
              owner:'T_RES_WIFI',//扩展属性表
            };
            this.stationName='';
            this.$refs.installTime.value = "";
            this.$refs.DinstallTime.value = "";
            this.openMapDataContentIsShow = true;
            this.actionType = null;
          },
          //获取地图经纬度
          pointCoordinate(data){
            //console.log(data);
            this.ModalData.longitude = data[0];
            this.ModalData.latitude= data[1];
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
        created(){
          let _this = this;
          $(function () {
            //  //console.log($("#datetimepicker"));
            $('#wifiRevampData').datetimepicker({
              language: "zh-CN",
              format: "yyyy-mm-dd",
              minView: "month",
              autoclose: true
            }).on("changeDate",function(ev){
              ////console.log(ev.date.valueOf());
              let selectDate = ev.date.valueOf();
              let theDate = new Date().getTime(); //当前时间
              if( selectDate >= theDate ){
                _this.s_alert("选择时间不能是未来时间！");
                $(".form-control").val("");
                $(".form-control").prev().val("");
              }
            });
          });
        }
    }
</script>

<style scoped>
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 60%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .form-control {
    height: 100%;
    border: 1px solid #ccc;
  }
</style>
